{% extends "staff/base.html" %}
{% import 'staff/_formhelpers.html' as forms %}

{% block title %} Enrollment - {{ current_course.display_name_with_semester }}{% endblock %}

{% block main %}
<section class="content-header">
    <h1>
        {{ current_course.display_name_with_semester }} Enrollment
        <small>{{ current_course.offering }}</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="{{ url_for(".course", cid=current_course.id) }}">
            <i class="fa fa-university"></i> {{ current_course.offering }}
        </a></li>
        <li class="active"><a href="{{ url_for('.enrollment', cid=current_course.id) }}">
            <i class="fa fa-list"></i> Enrollment</a>
        </li>
    </ol>
</section>

<section class="content">
    {% include 'alerts.html' %}
    <div class="row">
        <div class="col-md-9 col-xs-12">
            {% for roster, title in ((enrollments, "Student"), (staff, "Staff"), (lab_assistants, "Lab Assistant")) %}
                {% if roster %}
                    {% include 'staff/course/enrollment/enrollment.list.html' %}
                {% endif %}
            {% endfor %}
        </div>
        <!-- Side Panel -->
        <div class="col-md-3 col-xs-12">
            <!-- Box -->
            <div class="box collapsed-box">
                <div class="box-header with-border">
                    <h3 class="box-title">Export Roster</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <!-- form goes here -->
                    {% call forms.render_form(export_form, action_url=url_for('.enrollment_csv', cid=current_course.id), action_text='Export Roster (CSV)',
                    class_='form') %}
                        {{ forms.render_field(export_form.roles, label_visible=true, required="required", class_="checkbox-list") }}
                    {% endcall %}
                </div>
                <!-- /.box-body -->
                <!-- /.box-footer-->
            </div>

            <!-- New Box -->
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">Batch Enroll</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <a href="{{url_for('.batch_enroll',cid=current_course.id)}}">
                        <button class="btn btn-primary btn-block"> Enroll from CSV </button>
                    </a>
                </div>
                <!-- /.box-body -->
                <!-- /.box-footer-->
            </div>

           <!-- Box -->
            <div class="box collapsed-box">
                <div class="box-header with-border">
                    <h3 class="box-title">Add/Edit Participant</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Expand">
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <!-- form goes here -->
                    {% call forms.render_form(form, action_url=url_for('.enrollment', cid=current_course.id), action_text='Enroll',
                    class_='form') %}
                        {{ forms.render_field(form.name, label_visible=true, placeholder='Name', required="required", type='text') }}
                        {{ forms.render_field(form.email, label_visible=true, required="required", placeholder='test@test.com') }}
                        {{ forms.render_field(form.sid, label_visible=true, placeholder='1234567', type='text') }}
                        {{ forms.render_field(form.secondary, label_visible=true, placeholder='cs61a-abc', type='text') }}
                        {{ forms.render_field(form.section, label_visible=true, placeholder='', type='text') }}
                        {{ forms.render_field(form.role, label_visible=true) }}
                    {% endcall %}
                </div>
                <!-- /.box-body -->
                <!-- /.box-footer-->
            </div>
            <!-- /.box -->


        </div>
    </div>

</section>
<!-- </body> do not close body in template-->
{% endblock %}

{% block page_js %}
<script>
    {% if enrollments %}
    var studentOptions = {
      valueNames: ['email', 'name', 'sid', 'secondary', 'role', 'timestamp', 'section'],
      plugins: [ListPagination()],
      indexAsync: true,
      page: 20
    };
    var studentList = new List('Student-list', studentOptions);
    studentList.sort("timestamp", {order: "desc"})
    document.getElementById('Student-list').style.display = 'block';
    {% endif %}

    {% if staff %}
    var staffOptions = {
      valueNames: ['email', 'name', 'sid', 'secondary', 'role', 'timestamp', 'section'],
      plugins: [ListPagination()],
      page: 10
    };
    var staffList = new List('Staff-list', staffOptions);
    // TODO: Use removeClass with polyfill
    document.getElementById('Staff-list').style.display = 'block';
    {% endif %}

    {% if lab_assistants %}
    var labAssistantOptions = {
        valueNames: ['email', 'name', 'sid', 'secondary', 'role', 'timestamp', 'section'],
        plugins: [ListPagination()],
        indexAsync: true,
        page: 10
    };
    var labAssistantList = new List('Lab Assistant-list', labAssistantOptions);
    document.getElementById('Lab Assistant-list').style.display = 'block';
    {% endif %}
</script>
{% endblock %}
